<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6.计算属性，方法和侦听器</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">{{fullName}}{{position}}</div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                state: 'China',
                province: 'Guangdong',
                fullName: 'China  Guangdong',  //数据冗余
                position: 'south',
            },
            watch: {
                // 侦听state的改变，state不变化，侦听器state就不会执行
                state: function () {
                    console.log('侦听');
                    this.fullName = this.state + " " + this.province
                },
                // 侦听province的改变，province不变化，侦听器province就不会执行
                province: function () {
                    console.log('侦听');
                    this.fullName = this.state + " " + this.province

                }
            },
        })
    </script>
</body>

</html>